import { defineConfig  } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import postCssPxToRem from 'postcss-pxtorem'
import VueDevTools from 'vite-plugin-vue-devtools';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    vue(),
    // svgIcon配置
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]'
    }),
    // demo定位工具
    VueDevTools(),
    // demo定位工具
    codeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
  // 路径别名
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src')
      }
    ]
  },
  css: {
    // scss全局变量配置
    preprocessorOptions: {
      scss: {
        // scss全局变量文件
        additionalData: `@use "@/styles/index.scss" as *;`
      }
    },
    // 自适应，px>rem转换
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 160, // 比例：1px=?rem
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  },
  server: {
    port: 5173,
    proxy: {
      '/admin': { // 匹配所有以 '/admin'开头的请求路径
        target: 'http://localhost',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/admin/, '')
      }
    }
  },
})
